<template>
  <div>
    <el-menu :ellipsis="false" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="toggleSidebar" @click="toggleSidebar">
        <hamburger id="hamburger-container" :is-active="headers.headerStores.isopenMenu" class="hamburger-container" />
      </el-menu-item>
      <el-menu-item :disabled="true" index="1">
        <template #title>
          <el-breadcrumb separator=" > " wi>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in headers.state" :key="index">
              {{ item.meta.header }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </template>
      </el-menu-item>
      <div class="flex-grow" />
      <template>
        <el-image src=""></el-image>
      </template>
      <el-sub-menu class="userinfo" index="2">
        <template #title>
          <el-avatar :src="headers.users.userInfo.avatar" shape="square" />
          {{ headers.users.userInfo.nickName }}
        </template>
        <el-menu-item index="2-1" @click="userCenter()">个人中心 </el-menu-item>
        <el-menu-item index="2-3" @click="loginout()">退出登录 </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>
<script lang="ts" setup>
import { headerClass } from '@/page/types/admin/header'
import router from '@/router/router'
const headers = reactive(new headerClass())
const loginout = () => {
  headers.tokens.logOff() 
}
const userCenter = () => {
  router.push({ path: '/userinfo' })
}
const toggleSidebar = () => {
  if (headers.headerStores.isopenMenu) {
    headers.headerStores.setOpenMenu(false)
  } else {
    headers.headerStores.setOpenMenu(true)
  }
}

onBeforeMount(() => {
  if (!headers.users.userInfo.avatar) {
    headers.users.getUser()
  }
})

//onMounted
onMounted(() => {
  if (headers.route) {
    let matched = headers.route.matched as []
    headers.state = matched.filter((item: any) => {
      return item.meta && item.meta.header
    })
  }
})
//watch
watch(
  () => headers.route.matched,
  newVal => {
    let matched = newVal as []
    headers.state = matched.filter((item: any) => {
      return item.meta && item.meta.header
    })
    const tages = headers.state.filter(ss => {
      if (ss.meta && ss.meta.type) {
        return ss.meta.type.name !== 'M'
      }
      return false
    })
    if (tages && tages.length > 0) {
      headers.tagsStores.setTags(tages[0])
    }
  }
)
</script>
<style lang="scss" scoped>
.userinfo {
  margin-right: 0px;
}

.el-menuel-menu {
  color: black;
}

.el-breadcrumb {
  padding: 23px;
}

.flex-grow {
  flex-grow: 1;
}
.el-avatar--square {
  margin: 5px;
}
.el-select {
  width: 200px;
}
</style>
